<template>
  <vxe-modal v-model="props.show" :title="'寄回货物'" @close="close" width="500">
    <template #default>
      <el-form ref="ruleFormRef" :rules="rules" :model="formdata" label-width="80px">
        <el-form-item  label="快递单号" prop="name">
          <el-select
              style="width:400px;"
              v-model="formdata.name"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请输入快递单号">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="上传凭证" prop="parentClassifyId">
          <uploadImage v-model="formdata.uploadImage" />
        </el-form-item>
        <el-form-item  span="24">
            <el-button type="primary" @click="save"><vxe-icon name="check"></vxe-icon> 提交</el-button>
            <el-button @click="close"><vxe-icon name="close"></vxe-icon> 取消</el-button>
        </el-form-item>
      </el-form>
    </template>
  </vxe-modal>

</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { message } from '@/utils/element'
import uploadImage from '@/components/upload/index.vue'

const props = defineProps({
show: {
  type: Boolean,
  default: false
},
title: String,
editData: Object,
})
const emit = defineEmits(['close', 'success'])

const formdata = ref({})
const ruleFormRef = ref(null)
const options = ref([])


const rules = reactive({
name: [
  { required: true, message: '此项不能为空', trigger: 'blur' },
],
parentClassifyId: [
  { required: true, message: '此项不能为空', trigger: 'blur' },
],
status: [
  { required: true, message: '此项不能为空', trigger: 'blur' }
],
})
onMounted(async () => {

})

const save = async() => {
await ruleFormRef.value.validate(async(valid, fields) => {
  if (valid) {
    let res = {}
    if (props.editData.classifyId) {
      res = await editClassify(formdata.value)
    } else {
      res = await addClassify(formdata.value)
    }
    if (res.code == 0 || res.success) {
      message('保存成功', 2)
      emit('success')
      close()
    } else {
      message(res.message, 3)
    }
  }
})
}

const close = () => {
emit('close', false)
}
</script>
<style lang="scss" scoped>
  .addBox{
      display: flex;
      height: 40px;
      line-height: 30px;
      .label{
          width: 70px;
      }
  }
</style>
